<script lang="ts">
  import { HSplitPane, VSplitPane } from "$lib/splitpane";
  import { actixGraphqlEndpoint } from "$lib/js/stores";

  import type { Folder, KV, Quiz } from "$lib/ebm";
  import {
    Query,
    useQuery,
    useMutation,
    useQueryClient,
  } from "@sveltestack/svelte-query";
  import { request, gql } from "graphql-request";
  export let attributes: KV[] = [
    {
      k: "subject",
      v: "en",
    },
  ];

  let quizid = attributes.find((x) => x.k == "tab_id");
  let classPointerEventsNone;
  const onMouseDown = () => {
    classPointerEventsNone = "pointer-events-none";
  };
  const onMouseUp = () => {
    classPointerEventsNone = "";
  };

  let endpoint = $actixGraphqlEndpoint;
  const FIND_FOLDER_QUERY = gql`
    query ($id: ID!) {
      folder: node(id: $id) {
        id
        createdAt
        updatedAt
        ... on Folder {
          folderName
          snapshotAt
          seq
          title
          description
          refererUrl
          ancestry
          status
          pid
          from
          quizzes {
            id
            seq
            level
            subject
            m3U8
            title
            description
            createdAt
            updatedAt
            status
            from
          }
        }
      }
    }
  `;

  const findFolderResult = useQuery<Folder, { message: string }>(
    ["folder", quizid.v],
    async () => {
      const { folder } = await request(endpoint, FIND_FOLDER_QUERY, {
        id: quizid.v,
      });
      return folder;
    }
  );

  let activeEdgeId = "";
  const handleEdgeClick = (id) => () => {
    activeEdgeId = id;
    console.log("handleEdgeClick activeEdgeId=", activeEdgeId);
  };
</script>

{#if $findFolderResult.isLoading}
  Loading...
{:else if $findFolderResult.isError}
  Error {$findFolderResult.error.message}
{:else}
  <table class="bg-white text-gray-900 w-full shadow-none">
    <thead class="pt-4">
      <tr>
        <th
          colspan="3"
          class="text-left text-lg bg-blue-700 border-b-2  text-white"
        >
          Edges Into {$findFolderResult.data.title}
        </th>
      </tr>
      <tr>
        <th class="bg-blue-700 text-white p-2">Subject</th>
        <th class="bg-blue-700 text-white p-2">Predicate</th>
        <th class="bg-blue-700 text-white p-2">Object</th>
      </tr>
    </thead>
    <tbody>
      {#each $findFolderResult.data.quizzes as quiz}
        <tr
          class="{activeEdgeId === quiz.id
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 border-b border-teal-500 "
          on:click={handleEdgeClick(quiz.id)}
        >
          <td class="p-2">{$findFolderResult.data.title}</td>
          <td class="p-2">HAS_QZMEMBER_OF</td>
          <td class="p-2">{quiz.title}-{quiz.id}</td>
        </tr>
      {/each}
    </tbody>
  </table>
{/if}
